<template>
    <div class="row">
        <div class="col-2">
            <button class="btn btn-secondary button" @click="sort">
                To original order
            </button>
        </div>

        <div class="col-6">
            <h3>Transition</h3>
            <draggable class="list-group" v-model="list" :component-data="{
                    tag: 'ul',
                    type: 'transition-group',
                    name: !drag ? 'flip-list' : null
                }" v-bind='{
            animation: 200,
            group: "description",
            disabled: false,
            ghostClass: "ghost"
        }' @start="drag = true" @end="drag = false" item-key="order">
                <template #item="{ element }">
                    <li class="list-group-item">
                        <i :class="element.fixed ? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'
                            " @click="element.fixed = !element.fixed" aria-hidden="true"></i>
                        {{ element.name }}
                    </li>
                </template>
            </draggable>
        </div>

        <!-- <rawDisplayer class="col-3" :value="list" title="List" /> -->
    </div>
</template>
  
<script>
import draggable from "vuedraggable";

const message = [
    "vue.draggable",
    "draggable",
    "component",
    "for",
    "vue.js 2.0",
    "based",
    "on",
    "Sortablejs"
];

export default {
    name: "transition-example-2",
    display: "Transitions",
    order: 7,
    components: {
        draggable
    },
    data() {
        return {
            list: message.map((name, index) => {
                return { name, order: index + 1 };
            }),
            drag: false
        };
    },
    methods: {
        sort() {
            this.list = this.list.sort((a, b) => a.order - b.order);
        }
    },
    computed: {
        dragOptions() {
            return {
                animation: 200,
                group: "description",
                disabled: false,
                ghostClass: "ghost"
            };
        }
    }
};
</script>
  
<style>
.button {
    margin-top: 35px;
}

.flip-list-move {
    transition: transform 0.5s;
}

.no-move {
    transition: transform 0s;
}

.ghost {
    opacity: 0.5;
    background: #c8ebfb;
}

.list-group {
    min-height: 20px;
}

.list-group-item {
    cursor: move;
}

.list-group-item i {
    cursor: pointer;
}
</style>